<!--
 * @Author: byron
 * @Date: 2021-08-31 09:24:53
 * @LastEditTime: 2021-08-31 17:38:49
 * @Summary: 对props进行限制
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>
    <div id="test2"></div>

    <!-- 引入必要的js库 -->
    <script type="text/javascript" src="../../lib/react.development.js"></script>
    <script type="text/javascript" src="../../lib/react-dom.development.js"></script>
    <!-- 引入babel库进行语法转化 -->
    <script type="text/javascript" src="../../lib/babel.min.js"></script>
    <script type="text/javascript" src="../../lib/prop-types.js"></script>

    <script type="text/babel">
        class MyComponent extends React.Component{
            constructor(props){
                super(props);
                this.state = { ishot: true };
                this.change = this.change.bind(this)
            }
            render(){
                console.log(this);
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )
            }
            change(){
                console.log(this.state.ishot);
                this.state.ishot = !this.state.ishot
        }
        }
        // 为props加上限制
        MyComponent.propTypes = {
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
            name:PropTypes.string.isRequired,
        }
        MyComponent.defaultProps = {
            sex:"不男不女",
            age:19
        }
        const data = {
            name:'李登惠子',
            age:18,
            sex:'男'
        }
        //渲染组件到页面
    ReactDOM.render(<MyComponent name='王灿' age='18' /> ,document.getElementById("test"))
    ReactDOM.render(<MyComponent {...data}/> ,document.getElementById("test2"))
    </script>
</body>

</html>